<template>
    <main class="page">
        <!-- 标题 -->
        <div class="title">Search Results</div>
        <!-- 内容 -->
        <el-scrollbar
            :always="true"
            :min-size="50"
        >
            <!-- 列表渲染查询结果 -->
            <div v-for="item in queryResults">
                <!-- 点击条目跳转查看详细信息 -->
                <div class="item" @click="handleClick(item)">
                    {{ item }}
                </div>
            </div>
        </el-scrollbar>
    </main>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
// 导入全局状态-查询结果、数据库条目
import { useQueryStore } from '../stores/query';
import { useEntryStore } from '../stores/entry';

// 使用全局状态-查询结果、数据库条目
const queryResults=useQueryStore().value;
const entryStore=useEntryStore();
// 使用路由
const router=useRouter();
// 点击事件回调函数
function handleClick(entry:string):void{
    // 更新全局状态-数据库条目
    entryStore.update(entry);
    // 路由跳转到数据库条目页面
    router.push({
        path:'entry'
    });
}
</script>

<style lang="scss" scoped>
/* 页面布局样式 */
.page{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height:85vh;
    background-color: transparentize($color: grey, $amount: 0.2);
}
/* 标题样式 */
.title{
    font-size:5vh;
    font-weight: bold;
    color:gold;
    margin-bottom: 2vh;
}
/* 列表项布局样式 */
.item{
    height:10vh;
    width:20vw;
    font-size:4.5vh;
    text-align: center;
    line-height: 10vh;
    border-bottom: 1vh dotted white;
    &:hover{
        cursor: pointer;
        color:blue;
    }
}
</style>
